<template>
  <div class="app-container customer-div">
      <el-menu :default-active="isForeignDeliver" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="my">我的</el-menu-item>
          <el-menu-item index="all" v-if="warehouseDeliverAll">全部</el-menu-item>
          <el-menu-item index="1">外贸</el-menu-item>
      </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="发货单号：">
          <el-input v-model="listQuery.deliverSn"></el-input>
        </el-form-item>
        <el-form-item label="发货日期：">
          <el-date-picker
                  v-model="listQuery.deliverDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单号：" >
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="客户编号：">
          <el-input v-model="listQuery.customerNumber"></el-input>
<!--          <el-autocomplete-->
<!--                  clearable-->
<!--                  class="inline-input"-->
<!--                  value-key="customerName"-->
<!--                  :fetch-suggestions="querySearch"-->
<!--                  v-model="listQuery.customerName"-->
<!--                  placeholder="请输入内容"-->
<!--                  @select="handleSelectCustomerName"-->
<!--                  :trigger-on-focus="false"-->
<!--          ></el-autocomplete>-->
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="司机信息：" >
          <el-input v-model="listQuery.driverKeywords" placeholder="手机号，姓名，车牌号"></el-input>
        </el-form-item>
          <el-form-item label="单据类型：" >
              <el-select v-model="listQuery.deliverType" class="input-width" style="width:195px" placeholder="请选择" clearable>
                  <el-option :value="1" label="发货单" :key="1"></el-option>
                  <el-option :value="2" label="退货单" :key="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="司机状态：" >
              <el-select v-model="listQuery.driverState" class="input-width" style="width:195px" placeholder="请选择" clearable>
                  <el-option :value="1" label="已维护" :key="1"></el-option>
                  <el-option :value="2" label="未维护" :key="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="费用状态：" >
              <el-select v-model="listQuery.expressState" class="input-width" style="width:195px" placeholder="请选择" clearable>
                  <el-option :value="1" label="已维护" :key="1"></el-option>
                  <el-option :value="2" label="未维护" :key="2"></el-option>
              </el-select>
          </el-form-item>
        <el-form-item label="收货状态：" >
            <el-select v-model="listQuery.status" class="input-width" style="width:195px" placeholder="请选择" clearable>
                <el-option :value="1" label="进行中" :key="1"></el-option>
                <el-option :value="2" label="已完成" :key="2"></el-option>
            </el-select>
        </el-form-item>
          <el-form-item label="费用报销：" >
              <el-select v-model="listQuery.settlementState" class="input-width" style="width:195px" placeholder="请选择" clearable>
                  <el-option :value="1" label="已结算" :key="1"></el-option>
                  <el-option :value="2" label="未结算" :key="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="派单员：" >
              <el-select v-model="listQuery.driverChargeUserId" filterable placeholder="请选择" clearable>
              <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
              </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="送货类型：" >
              <el-select v-model="listQuery.isYunlianDeliver" filterable placeholder="请选择" clearable>
                  <el-option
                          :key="1"
                          label="运联发货"
                          :value="1">
                  </el-option>
                  <el-option
                          :key="0"
                          label="采购发货"
                          :value="0">
                  </el-option>
                  <el-option
                          :key="2"
                          label="自提"
                          :value="2">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="费用类型：" >
              <el-select v-model="listQuery.freightType" filterable placeholder="请选择" clearable>
                  <el-option key="sale" label="销售承担" value="sale"></el-option>
                  <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                  <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                  <el-option key="customer" label="客户承担" value="customer"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="收款人：" >
              <el-input v-model="listQuery.payeeUserName"></el-input>
          </el-form-item>
        <el-form-item label="是否有票据：" >
          <el-select v-model="listQuery.isHasBill" filterable placeholder="请选择" clearable>
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运满满订单号：" >
          <el-input v-model="listQuery.yunManManSn"></el-input>
        </el-form-item>
        <el-form-item label="是否打印：" >
          <el-select v-model="listQuery.isHasPrint" filterable placeholder="请选择" clearable>
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否整车：" >
          <el-select v-model="listQuery.isCompleteCar" placeholder="请选择" clearable>
            <el-option :key="1" label="整车" value="整车"></el-option>
            <el-option :key="0" label="散货" value="散货"></el-option>
            <el-option :key="2" label="拼车" value="拼车"></el-option>
            <el-option :key="3" label="专线" value="专线"></el-option>
            <el-option :key="4" label="铁路" value="铁路"></el-option>
            <el-option :key="5" label="海运" value="海运"></el-option>
            <el-option :key="6" label="快运" value="快运"></el-option>
            <el-option :key="7" label="快递" value="快递"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
            <el-button
                    v-if="deliverExport"
                    @click="downloadExcel"
                    type="primary">
                导出
            </el-button>

            <el-button
              @click="batchPrinting"
              type="primary">
              批量打印
            </el-button>

        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
              ref="multipleTable"
              row-key="deliverId"
              @selection-change="handleSelectionChange"
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column type="selection" :reserve-selection="true" width="60" align="center" fixed="left"></el-table-column>
        <el-table-column  label="单据类型" width="120" align="center" prop="deliverTypeStr">
        </el-table-column>
        <el-table-column  label="发货日期" width="100" align="center" prop="shipTime">
        </el-table-column>
        <el-table-column  label="发货单号" width="150" prop="deliverSn" align="center">
            <template slot-scope="scope">
                <span style="vertical-align: middle">{{scope.row.deliverSn}}</span>
                <img src="../../assets/images/zhuofei2.png"  style="vertical-align: middle;" v-if="scope.row.isDelete"/>
                <img src="../../assets/images/bian.png" v-if="scope.row.isUpdate" style="vertical-align: middle;"/>
            </template>
        </el-table-column>
          <el-table-column  label="客户编号" width="300" prop="customerNumber">
            <template slot-scope="scope">
              <span>
                {{scope.row.customerNumber }}
              </span>
              <!--是否有权限-->
              <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
            </template>
          </el-table-column>
          <el-table-column  label="订单号" width="140" align="center" class-name="cspantd">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.orderSn}}
                  </div>
              </template>
          </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  label="送货类型"
                  align="center"
                  width="100">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.sendType}}
                  </div>
              </template>
          </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  label="商品牌号"
                  align="center"
                  width="200">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.goodsSn}}
                  </div>
              </template>
          </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  label="预计发货仓库"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.warehouseName}}
                  </div>
              </template>
          </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  label="实际发货仓库"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.shipWarehouse}}
                  </div>
              </template>
          </el-table-column>
        <el-table-column
          label="收货地址"
          width="200"
          align="center">
          <template slot-scope="scope">
              {{scope.row.addressInfo}}
          </template>
        </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  label="本次发货数量"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                      {{item.shipNum}}
                  </div>
              </template>
          </el-table-column>
        <el-table-column
                class-name="cspantd"
                prop="driverName"
                label="批号"
                width="200"
                align="center">
            <template slot-scope="scope">
                <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                    {{item.batchNo}}
                </div>
            </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="批次号类型"
          width="100">
          <template slot-scope="scope">
            <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
              {{item.goodsPayMethod}}
            </div>
          </template>
        </el-table-column>
          <el-table-column
                  class-name="cspantd"
                  prop="driverName"
                  label="结算方式"
                  width="450">
              <template slot-scope="scope">
                  <div class="tdDiv" v-for="(item,index) in scope.row.list" :style="{'border-bottom': index==scope.row.list.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                      {{item.settleType}}
                  </div>
              </template>
          </el-table-column>
          <el-table-column
                  label="运联含税运费"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  {{scope.row.orderInputFreight}}
              </template>
          </el-table-column>
        <el-table-column
                label="实际运费"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.actualFreight}}
          </template>
        </el-table-column>
          <el-table-column
                  label="运费差异"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  {{scope.row.diffFreight}}
              </template>
          </el-table-column>
          <el-table-column
                  label="运费差异承担"
                  width="100"
                  align="center">
              <template slot-scope="scope">
                  {{scope.row.diffFreightType}}
              </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  label="司机运费"
                  width="100">
              <template slot-scope="scope">
                  {{scope.row.driverExpress}}
              </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="是否有票据"
            width="100">
            <template slot-scope="scope">
              {{scope.row.isHasBill == 1 ? '有票据' : '无票据'}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  label="收款人"
                  width="100">
              <template slot-scope="scope">
                    {{scope.row.payeeUserName}}
              </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  label="费用类型"
                  width="100">
              <template slot-scope="scope">
                  {{scope.row.freightType}}
              </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  label="是否报销"
                  width="80">
              <template slot-scope="scope">
                  {{scope.row.settlementState}}
              </template>
          </el-table-column>
        <el-table-column
                label="状态"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.status}}
          </template>
        </el-table-column>
        <el-table-column
                label="业务员"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                label="派单员"
                width="100"
                align="center">
            <template slot-scope="scope">
                {{scope.row.driverChargeUserName}}
            </template>
        </el-table-column>
        <el-table-column
          label="物流毛利"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.logisticsProfit}}
          </template>
        </el-table-column>

          <el-table-column
            label="收货凭证"
            width="150"
            align="center">
            <template slot-scope="scope">
               <img :src="item" v-for="item in scope.row.goodsReceipt" @click="fullImg(item)" style="margin-left:5px;margin-bottom:5px;cursor: pointer;width:30px;height:30px;object-fit: contain"/>
            </template>
          </el-table-column>

          <el-table-column
                  prop="hasPrintNum"
                  width="100"
                  fixed="right"
                  label="打印次数"
                  align="center">
          </el-table-column>
        <el-table-column
                width="100"
                fixed="right"
                label="操作"
                align="center">
          <template slot-scope="scope">
<!--              <el-button-->
<!--                      v-if="scope.row.ymmOrderId"-->
<!--                      type="text"-->
<!--                      size="mini"-->
<!--                      @click="showMap(scope.row)">车辆轨迹-->
<!--              </el-button>-->
            <el-button
              type="text"
              size="mini"
              @click="toDetail(scope.row)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20,30,40,50]"
              :total="count">
      </el-pagination>
    </div>


      <!--确认到货-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="handleClose2"
              title="编辑发货单"
              :visible.sync="dialogVisible2"
              width="500px">
          <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules2">
              <el-form-item label="到货日期：" prop="goodsReceiptDate">
                  <el-date-picker
                          value-format="yyyy-MM-dd"
                          v-model="sendForm.goodsReceiptDate"
                          style="width:140px"
                          type="date"
                          placeholder="发货日期">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="上传凭证：" prop="goodsReceipt">
                  <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in sendForm.goodsReceipt ">
                      <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
                      <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
                  </div>
                  <el-upload
                          class="avatar-uploader"
                          :data="uploadToken"
                          action="https://upload.qiniup.com"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-input v-model="sendForm.goodsReceipt" type="hidden" style="display: none"></el-input>
              </el-form-item>
              <el-form-item label="备注信息：">
                  <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="sendForm.goodsReceiptRemark"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
      </el-dialog>
<!--      <trajectoryMap ref="trajectoryMap"></trajectoryMap>-->

    <!--打印弹窗-->
    <el-dialog
      :beforeClose="closePrint"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible4"
      width="900px">
      <div style="max-height:400px;overflow-y: auto;">
        <div id="print-div">
          <div v-for="orderInfo in list" style="page-break-after: always;">
            <div class="title">{{orderInfo.companyName}}送货单</div>
            <div class="paper-top">
              <el-row>
                <el-col :span="18">
                  <el-row>
                    <el-col :span="13"><span>编号：{{orderInfo.deliverSn}}</span></el-col>
                    <el-col :span="11"><span>发货日期：{{orderInfo.shipDate}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="13"><span>客户：{{orderInfo.customerName}}</span></el-col>
                    <el-col :span="11"><span>合同总数量：{{orderInfo.goodsAllNum}}/{{orderInfo.orderSendNum}}</span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24"><span>地址：{{orderInfo.receiveAddress}}</span></el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <div style="overflow: hidden"><span style="float:left;width:70px">结算方式：</span><span style="float:left;width:calc(100% - 70px)">{{orderInfo.orderRemark}}</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <el-row>
                    <el-col :span="13"><span>电话：{{orderInfo.receiverMobile}}</span></el-col>
                    <el-col :span="11"><span>联系人：{{orderInfo.receiverName}}</span></el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <div v-if="orderInfo.isMoresuOnlineOrder == 1">合同类型：{{orderInfo.isMoresuOnlineOrder == 1 ? '推广': ''}}</div>
                </el-col>
              </el-row>
            </div>
            <div class="good-table">
              <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <th align="center" width="12.5%"><div style="white-space:nowrap;">商品名称</div></th>
                  <th align="center" width="15%"><div style="white-space:nowrap;">规格型号</div></th>
                  <th align="center" width="3%"><div style="white-space:nowrap;">单位</div></th>
                  <th align="center" width="10%"><div style="white-space:nowrap;">发货数量</div></th>
                  <th align="center" width="14%"><div style="white-space:nowrap;">金额</div></th>
                  <th align="center" width="12.5%"><div style="white-space:nowrap;">合同单号</div></th>
                  <th align="center" ><div style="white-space:nowrap;">备注</div></th>
                </tr>
                <tr v-for="item in orderInfo.deliverGoods">
                  <td align="center"><div style="word-break:break-all">{{item.goodsName}}</div></td>
                  <td align="center"><div style="white-space:nowrap;font-size:12px;">{{item.goodsSn}}</div></td>
                  <td align="center" style="white-space:nowrap;width:40px">{{item.goodsUnit}}<div></div></td>
                  <td align="center" style="white-space:nowrap;"><div>{{item.goodsNum}}</div></td>
                  <td align="center"><div style="white-space:nowrap;"> </div></td>
                  <td align="center"><div style="white-space:nowrap;">{{item.orderSn}}</div></td>
                  <td align="center"><div style="word-break:break-all;min-width:60px">{{item.orderRemark}}</div></td>
                </tr>
                <tr>
                  <td colspan="3" align="center">数量合计</td>
                  <td colspan="4">{{orderInfo.shipAllNum}}吨</td>
                </tr>
              </table>
            </div>
            <div class="paper-bottom" style="position: relative">
              <el-row>
                <el-col :span="8"><span>提货人及公司(签字)</span></el-col>
                <el-col :span="6" style="text-align: center"><span>客户签收(盖公章)</span></el-col>
                <el-col :span="6" style="text-align: right"><span>业务员：{{orderInfo.userName}}</span></el-col>
                <el-col :span="4" style="text-align: right"><span>制单：{{orderInfo.createUserName}}</span></el-col>
              </el-row>
              <el-row style="margin-top:20px;">
                <el-col :span="12"><span style="font-weight: bold">客户其他需求：</span></el-col>
              </el-row>
              <el-row style="margin-top:10px">
                <div style="display: inline-block">
                  <div>注：本单白色联为（发货联），红色为（客户联），蓝色为(销售部),绿单为(仓库联)，黄色为(存根联)</div>
                  <div style="text-indent:2em;">是否需要收货确认函：<span>{{ orderInfo.isNeedReceived==1?'是':'否' }}</span></div>
                  <div style="text-indent:2em;">收货确认函上传状态：<span>{{ orderInfo.isHasUploadReceived==1?'已上传':'未上传' }}</span></div>
                  <div style="text-align: right">仓库发货人签字:</div>
                </div>
              </el-row>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
      </div>
    </el-dialog>

    <!--放大图片-->
    <el-dialog
      :visible.sync="dialogVisible5"
      width="800px">
      <img :src="fullSrc" style="width:100%;"/>
    </el-dialog>

  </div>
</template>
<script>
  import {getCustomerOption,getOrderUsersList,getDeliverList,deliverUpdate,getQiniuToken,postDeliverVoucher,exportDeliverList,getPrintContentBatch,deliverUpdatePrintNum} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import {validateCommission} from '@/utils/validate';
  // import trajectoryMap from '@/views/components/trajectoryMap'
  import store from '@/store'
  import "@/utils/jQuery.print"
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    goodsName: '',
    createDate:null,
    deliverDate:null,
    customerName:null,
    deliverSn:'',
    userId:'',
    driverKeywords:'',
    tab:'my',
    status:null,
    driverState:null,
    deliverType:null,
    expressState:null,
    settlementState:null,
    driverChargeUserId:null,
    isYunlianDeliver:'',
    freightType:'',
    payeeUserName:'',
    isHasBill:'',
    yunManManSn:'',
    isHasPrint:'',
    customerNumber:'',
    isCompleteCar:''
  };
  const defaultSendForm={
      deliverId: '',
      goodsReceipt: [],
      goodsReceiptRemark: '',
      goodsReceiptDate:''
  };
  export default {
    name: "index",
    data(){
        const isvalidateCommission = (rule, value, callback) => {
            if (!validateCommission(parseFloat(value))) {
                callback(new Error('非负整数或小数'))
            } else if(value > 99999999){
                callback(new Error('最大值为99999999'))
            }else {
                callback()
            }
        };
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count: 0,
        listLoading: false,
        roles:store.getters.roles ? store.getters.roles : [],
        userOptionList:[],
        dialogVisible:false,
        btnLoading:false,
        quitForm:{
            deliverSn:'',
            freight:'',
            deliverShipNum:'',
            deliverId:'',
            actualFreight:'',
            driverExpress:'',
            driverName:'',
            driverPhone:'',
            driverCardNo:'',
            remark:''
        },
        rules:{
            actualFreight:[{required: true, trigger: 'blur' ,validator: isvalidateCommission}],
            driverName:[{required: true, trigger: 'blur' ,message: '请输入司机姓名',}],
            driverExpress:[{required: true, trigger: 'blur',validator: isvalidateCommission}],
            driverPhone:[{required: true, trigger: 'blur' ,message: '请输入司机手机号',}],

        },
          sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
          rules2:{
              goodsReceiptDate:[{required: true, trigger: 'blur' ,message: '请输入到货时间',}],
              goodsReceipt:[{required: true, trigger: 'change' ,message: '请上传到货凭证',}],
          },
          dialogVisible2:false,
          btnLoading2:false,
          imgs:[],
          uploadToken:{
              token:'',
          },
          imgDomain:'',
          selectProduct:[],
          dialogVisible4:false,
          list:[],
          dialogVisible5:false,
          fullSrc:'',
          isForeignDeliver:'my'

      }
    },
    components : {
      // trajectoryMap:trajectoryMap
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),

      isCanDeliverFactory(){
        if(this.roles.indexOf("deliverFactory") != -1){
          return true
        }else{
          return false
        }
      },
      isCanDeliverWarehouse(){
        if(this.roles.indexOf("deliverWarehouse") != -1){
          return true
        }else{
          return false
        }
      },
        isCanDeliverAll(){
            if(this.roles.indexOf("deliverAll") != -1){
                return true
            }else{
                return false
            }
        },
        deliverExport(){
            if(this.roles.indexOf("deliverExport") != -1){
                return true
            }else{
                return false
            }
        },
      warehouseDeliverAll(){
        if(this.roles.indexOf("warehouseDeliverAll") != -1){
          return true
        }else{
          return false
        }
      },
    },
    created() {
        if (localStorage.getItem('deliverListQuery')){
            this.listQuery = JSON.parse(localStorage.getItem('deliverListQuery'));
            localStorage.removeItem('deliverListQuery');
        }
      if(this.$route.query.type){
      let start = new Date(new Date(new Date().getTime()).setHours(0,0,0,0));
      let end = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1);
        switch (this.$route.query.type) {
          case 'Today':
            this.listQuery.deliverDate = [formatDate(start, 'yyyy-MM-dd hh:mm:ss'),formatDate(end, 'yyyy-MM-dd hh:mm:ss')];
            break;
        }
      }else{
        let now = new Date().getTime();
        let endTime = now+60*60*24*1000*2;
        let startTime = endTime - 60*60*24*1000*30;
        let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd');
        let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
          this.listQuery.deliverDate = [startDate,endDate];
      }
      this.getList();
      this.getUserOptionList();
      this.getUploadToken();
    },
    filters: {
      formatCreateTime(time) {
        if(time){
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }else{
          return '--'
        }
      },
    },
    methods:{
      fullImg(src){
        this.dialogVisible5 = true;
        this.fullSrc = src;
      },
        batchPrinting(){
          if(this.selectProduct.length > 0){
            this.dialogVisible4 = true;
            let deliverIds = [];
            this.selectProduct.forEach((el)=>{
              deliverIds.push(el.deliverId)
            })
            getPrintContentBatch({deliverIds:deliverIds.join(",")}).then((res)=>{
                  this.list = res.list
            })
          }else{
            this.$message({
              type: 'info',
              message: '请先选择单据'
            });
          }

        },

      //关闭打印弹窗
      closePrint(){
        this.dialogVisible4 = false;
        this.getList().then(()=>{
          this.$nextTick(() => {
            this.$refs.multipleTable.clearSelection();
            this.selectProduct = [];
            this.$forceUpdate()
          })
        });
      },

      //打印
      printdiv(){
        let deliverIds = [];
        this.selectProduct.forEach((el)=>{
          deliverIds.push(el.deliverId)
        })
        deliverUpdatePrintNum({deliverId:deliverIds.join(",")});
        $("#print-div").print({
          globalStyles:true,//是否包含父文档的样式，默认为true
          mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
          stylesheet:null,//外部样式表的URL地址，默认为null
          noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
          iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
          append:null,//将内容添加到打印内容的后面
          prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
          deferred: $.Deferred()//回调函数
        });
      },

        //切换选择单据
        handleSelectionChange(val){
          console.log("val",JSON.parse(JSON.stringify(val)))
          this.selectProduct = JSON.parse(JSON.stringify(val));
        },

        showMap(item){
          console.log("item",item)
          // this.$refs.trajectoryMap.showMap(item.deliverSn,item.ymmOrderId);
        },

        //获取七牛TOKEN
        getUploadToken(){
            getQiniuToken().then((res)=>{
                this.uploadToken.token = res.token;
                this.imgDomain = res.domain
            })
        },

        //上传图片
        handleAvatarSuccess(res){
            this.sendForm.goodsReceipt.push(this.imgDomain+res.key)
        },

        //删除图片
        delImg(index){
            this.sendForm.goodsReceipt.splice(index,1)
        },

        //显示收货
        showSendForm(item){
            this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
            this.sendForm.deliverId = item.deliverId;
            this.dialogVisible2 = true;
        },

        //关闭收货
        handleClose2(){
            this.dialogVisible2 = false;
            this.$refs.sendForm.clearValidate();
        },

        //提交收货信息
        handleConfirm2(){
            this.$refs.sendForm.validate((valid) => {
                if (valid) {
                    this.btnLoading2 = true;
                    let data = JSON.parse(JSON.stringify(this.sendForm));
                    postDeliverVoucher(data).then(()=>{
                        this.btnLoading2 = false;
                        this.handleClose2();
                        this.getList();
                    }).catch(()=>{
                        this.btnLoading2 = false;
                    })
                }
            })
        },
        //查看发货单
        toDetail(item){
            localStorage.setItem('deliverListQuery', JSON.stringify(this.listQuery));
            console.log(item)
            let routeData = this.$router.resolve({name:'deliverCon',query:{id:item.deliverId,type:'edit'}});
            window.open(routeData.href);
        },

        //编辑发货单
        showDetail(item){
            this.dialogVisible = true;
            this.quitForm.deliverSn = item.deliverSn;
            this.quitForm.freight = item.freight;
            this.quitForm.deliverShipNum = item.deliverShipNum;
            this.quitForm.deliverId = item.deliverId;
            this.quitForm.actualFreight = item.actualFreight;
            this.quitForm.driverExpress = item.driverExpress;
            this.quitForm.driverName = item.driverName;
            this.quitForm.driverPhone = item.driverPhone;
            this.quitForm.driverCardNo = item.driverCardNo;
            this.quitForm.remark = item.shipRemark;
        },
        //关闭编辑弹窗
        handleClose(){
            this.dialogVisible = false;
            this.$refs.quitForm.clearValidate();
        },

        //提交编辑弹窗
        handleConfirm(){
            this.$refs.quitForm.validate((valid) => {
                if (valid) {
                    this.btnLoading = true;
                    let data = JSON.parse(JSON.stringify(this.quitForm));
                    deliverUpdate(data).then(()=>{
                        this.btnLoading = false;
                        this.handleClose();
                        this.getList();
                    }).catch(()=>{
                        this.btnLoading = false;
                    })
                }
            })
        },

      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      //选择员工名称
      handleSelectUserName(key,item){
        this.listQuery[key] = item.userId;
      },


      //客户名称输入匹配
      querySearch(queryString, cb){
        getCustomerOption({keywords:queryString}).then((res)=>{
          cb(res);
        })
      },


      //选择客户名称
      handleSelectCustomerName(item){
        this.listQuery.customerName = item.customerName
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
        this.listQuery.tab = key;
        this.isForeignDeliver = key
        this.handleSearchList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取发货列表
      getList() {
        this.listLoading = true;
        let data = JSON.parse(JSON.stringify(this.listQuery));
        if(this.isForeignDeliver == 1){
          data.isForeignDeliver = 1
        }
         return  getDeliverList(data).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },

        //下载excle
        downloadExcel(){
            let params = JSON.parse(JSON.stringify(this.listQuery));
            if(this.isForeignDeliver == 1){
              params.isForeignDeliver = 1
            }
            exportDeliverList(params).then((res)=>{
                require.ensure([], () => {
                    const { export_json_to_excel } = require('sheet/Export2Excel');
                    const tHeader = res.title;
                    const filterVal = res.columns;
                    const list = res.list;
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, res.fileName);
                })
            })
        },

        //下载表格数据格式化
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

    },
  }
</script>

<style lang="scss">
    .cspantd{
        padding:0 !important;
        .cell{
            padding:0 !important;
            .tdDiv{
                padding:5px 10px;
                min-height: 20px;
                line-height: 20px;
                box-sizing: content-box;
            }
        }
    }
    #print-div{
      font-size:14px;
      font-family: "Microsoft YaHei";
      color:#000;
      .title{
        font-size:28px;
        font-weight: bold;
        text-align: center;
        line-height: 40px;
      }
      .paper-top{
        margin-top:20px;
        line-height: 20px;
      }
      .good-table{
        margin-top:0px;
        table{
          border-left:1px solid #000;
          border-bottom:1px solid #000;
          td,th{
            font-weight: normal;
            border-right:1px solid #000;
            border-top:1px solid #000;
            padding:5px 10px;
            line-height: 20px;
          }
        }
      }
      .paper-bottom{
        margin-top:0px;
        line-height: 20px;
      }
    }

</style>
